<template>
	<div class="self-inspection-container">
		<div class="title-panel" v-if="firstItem">
			<div class="title-cp">{{ firstItem.enterpriseName }}</div>
		</div>
		<div class="title-panel" v-if="firstItem">
			<div class="check-title">{{ firstItem.facilityName }} - 检查内容</div>
		</div>

		<div v-if="loading" class="loading">加载中...</div>
		<div v-else-if="error" class="error">{{ error }}</div>
		<div v-else>
			<div v-if="items.length === 0" class="empty">暂无自查记录</div>
			<div v-else>
				<div class="check-item" v-for="item in items" :key="item.id || item.stepName">
					<div class="check-name"><span class="title-tip"></span>{{ item.stepName }}</div>
					<div class="check-result">检查结果: {{ formatValue(item.value) }}</div>
					<div class="check-time-and-user">
						<div class="check-time">
							<img class="icon" src="https://wx.ksepia.com/profile/mini-image/do-task-time-icon.png" alt="time" />
							{{ formatTime(item.finishedAt) }}
						</div>
						<div class="check-user">
							<img class="icon" src="https://wx.ksepia.com/profile/mini-image/do-task-user-icon@3x.png" alt="user" />
							{{ item.userName }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { onMounted, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { showToast } from 'vant'
import { getSelfInspectionCheck } from '@/api/selfInspection'
import dayjs from 'dayjs'

export default {
	name: 'SelfInspectionFacilityCheck',
	setup() {
		const route = useRoute()
		const loading = ref(true)
		const error = ref('')
		const items = ref([])

		const firstItem = computed(() => items.value[0] || null)

		const requiredParams = ['enterpriseId', 'facilityId', 'finishedAt', 'userId']

		const formatTime = (t) => {
			if (!t) return ''
			// 兼容后端可能返回字符串或时间戳
			return dayjs(t).format('YYYY-MM-DD HH:mm')
		}

		const formatValue = (v) => {
			if (v === '1') return '是'
			if (v === '0') return '否'
			return v ?? ''
		}

		const fetchData = async () => {
			loading.value = true
			error.value = ''
			try {
				const query = route.query || {}
				// 参数校验
				const missing = requiredParams.filter((k) => !query[k])
				if (missing.length) {
					error.value = `缺少必要参数: ${missing.join(', ')}`
					showToast(error.value)
					return
				}
				// finishedAt 可能被 encode 过
				const finishedAtDecoded = decodeURIComponent(query.finishedAt)
				const params = {
					enterpriseId: query.enterpriseId,
					facilityId: query.facilityId,
					finishedAt: finishedAtDecoded,
					userId: query.userId,
				}
				const list = await getSelfInspectionCheck(params)
				items.value = Array.isArray(list) ? list : []
			} catch (e) {
				console.error(e)
				error.value = e.message || '加载失败'
				showToast(error.value)
			} finally {
				loading.value = false
			}
		}

		onMounted(fetchData)

		return {
			loading,
			error,
			items,
			firstItem,
			formatTime,
			formatValue,
		}
	},
}
</script>

<style lang="less" scoped>
.self-inspection-container {
	background-color: #f7f7f7;
	min-height: 100vh;
}
.title-panel {
	font-size: 18px;
	background-color: #fff;
	padding: 8px;
}
.title-cp {
	font-size: 16px;
	font-weight: 600;
	padding: 0 0 0 12px;
}
.check-title {
	font-size: 14px;
	font-weight: 600;
	padding: 0 0 0 12px;
}
.title-tip {
	width: 4px;
	height: 12px;
	background-color: #0067ff;
	border-radius: 2px;
	margin: 8px 10px 0 0;
	line-height: 20px;
	display: inline-block;
}
.check-item {
	background-color: #fff;
	margin: 10px 10px;
	padding: 10px;
	font-size: 14px;
}
.check-name {
	font-size: 14px;
	display: flex;
	flex-direction: row;
}
.check-time-and-user {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 12px;
	color: #666;
}
.check-result {
	margin: 10px 0;
}
.icon {
	width: 12px;
	height: 12px;
	object-fit: contain;
	margin-right: 4px;
}
.loading,
.empty,
.error {
	text-align: center;
	padding: 40px 0;
	color: #888;
}
.error {
	color: #ff4d4f;
}
</style>
